<html>
    <head>
        <title>绑定html-class  ----对象语法</title>
    </head>
    <body>
        <script>
            // ★、一、对象语法：
                                    /*
                                        我们可以传给 v-bind:class 一个对象，以动态地切换 class: 

                                              <div v-bind:class="{ active: isActive}"></div>

                                              上面的语法表示 active 这个 class 存在与否，将取决于数据property isActive的 truthiness.

                                              你可以在对象中传入更多字段来冬天切换多个class.
                                    */

                                    /*
                                        此外，v-bind:class 指令也可以与普通的 class attribute共存。
                                        当有如下模板：

                                            <div  
                                                class="static"
                                                v-bind:class="{ active:isActive,'text-danger':hasError}"     对象perporty 有无'' 都一样
                                            >
                                            </div>
                                    */
                                            // 有如下data:
                                            data:{
                                                    isActiove:true,
                                                    hasError:false
                                                }
                                            // 渲染结果为:  <div class="static active"></div>

                                            /*
                                                当 isActive 或者  hasError变化时， class 列表将相应地更新。

                                                另外，绑定的数据对象也不是必须内联式的声明在模板里：
                                                也可以这样：
                                                    <div :class="classObject"></div>
                                            */
                                                data:{
                                                    classObject:{
                                                        active:true,
                                                        'text-danger':false
                                                    }
                                                }

                                            /*
                                                我们还可以给class属性绑定一个"计算属性" 。这是一个常用且强大的模式。
                                                eg:
                                                    <div v-bind:class="classObject"></div>
                                            */
                                                data:{
                                                    iaActive:true,
                                                    error:null
                                                },
                                                computed:{
                                                    classObject:function(){
                                                         return {
                                                            active:this.iaActive && !this.error,
                                                            'text-danger':this.error && this.error.type==='fatal'
                                                         }   
                                                    }
                                                }
        </script>
    </body>
</html>